---
type: tutorial
title: サイトをウェブにデプロイする
description: |-
  「初めてのAstroブログ」チュートリアル -
  チュートリアルプロジェクトのGitHubリポジトリをNetlifyに接続し、ウェブ上にデプロイする
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - GitHubのリポジトリを新しいNetlifyアプリとして追加する
  - ウェブ上にAstroサイトをデプロイする
</PreCheck>

ここでは、GitHubリポジトリをNetlifyに接続します。Netlifyは、あなたがコードに変更をコミットするたびに、そのプロジェクトを使用してサイトをビルドし、ウェブ上にデプロイします。

:::tip[ここで使うのは...]
このチュートリアルでは**Netlify**を使用しますが、サイトをインターネットにデプロイするにあたり、お好きなホスティングサービスを使用して構いません。
:::

## 新しいNetlifyサイトを作成する

<Steps>
1. もしまだであれば、[Netlify](https://netlify.com)で無料アカウントを作成します。

    ユーザー名をメモしておきます。`https://app.netlify.com/teams/username`で、ダッシュボードと作成済みのサイトが表示されます。

2. <kbd>Add new site</kbd> > <kbd>Import an existing project</kbd>をクリックします。

    Gitプロバイダーに接続するように求められます。GitHubを選択し、画面の指示に従ってGitHubアカウントを認証します。次に、提供されたリストからAstroプロジェクトのGitHubリポジトリを選択します。

3. 最後のステップでは、Netlifyがアプリのサイト設定を表示します。Astroプロジェクトの場合はデフォルトのままで問題ないため、下にスクロールして<kbd>Deploy site</kbd>をクリックします。
</Steps>

おめでとうございます、Astroウェブサイトが作成できました！

## プロジェクト名を変更する

Netlifyのサイト概要ページでは、ランダムに生成されたプロジェクト名と、`https://project-name-123456.netlify.app`という形式のウェブサイトURLが表示されます。プロジェクト名をより覚えやすいものに変更すると、URLは自動的に更新されます。

## 新しいウェブサイトにアクセスする

サイト設定に表示されているURLをクリックするか、URLをブラウザのウィンドウに入力して、新しいウェブサイトを表示します。


<Box icon="question-mark">

### 確認テスト



既存ウェブサイトのホームページを更新したいとします。どのような手順を踏めばよいでしょうか？

  <MultipleChoice>
    <Option>
      ターミナルを開いて`create astro`を実行し、NetlifyのURLにアクセスする。
    </Option>
    <Option>
      Netlifyアプリの設定を変更し、StackBlitzで新しいAstroプロジェクトをフォークする。
    </Option>
    <Option isCorrect>
      `index.astro`を編集し、変更をGitHubにコミットしてプッシュする。残りはNetlifyにお任せ！
    </Option>
  </MultipleChoice>
 </Box>

<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] 更新されたウェブサイトをオンラインで表示できる。
- [ ] コーディングに戻る準備ができている！
</Checklist>
</Box>

### 参考

- <p>[A step-by-step guide to deploying on Netlify](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) <Badge class="neutral-badge" text="外部サイト" /></p>
